<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="reward-card section-bg">
			<view class="p-t-sm p-b-sm" v-if="banner.length > 0">
				<u-swiper
					:list="banner"
					radius='5px'
					keyName="name"
					previousMargin="30rpx"
					nextMargin="30rpx"
					height="70px"
					imgMode="widthFix"
					circular
					@click="bannerClick"
					v-if="banner.length > 0"
				></u-swiper>
			</view>
			<view v-if="userInfo">
				<view class="flex-between">
					<view class="item">
						<text class="num number">{{userInfo.capital_data.allMoney}}</text>
						<view class="foot">
							<text>{{$t('reward.money.unit-before')}}{{configInfo.money_company}}</text>
						</view>
					</view>
					<view class="item">
						<text class="num number">{{userInfo.capital_data.allIntegral}}</text>
						<view class="foot">
							<text>{{$t('reward.integral.unit-before')}}{{configInfo.integral_company}}</text>
						</view>
					</view>
				</view>
				<view class="text-xs m-t-xs m-b-md text-secondary text-center">
					<text>{{$t('reward.data-tips')}}</text>
				</view>
			</view>
			
		</view>
		<view class="flex-center m-t-md">
			<image src="/static/images/dot-left.png" mode="widthFix" style="width: 60rpx;"></image>
			<text class="m-l-sm m-r-sm font-weight text-md">{{$t('reward-list.list-title')}}</text>
			<image src="/static/images/dot-right.png" mode="widthFix" style="width: 60rpx;"></image>
		</view>
		<view class="fuli-list">
			<!-- 签到 -->
			<view class="fuli-list_item flex-start m-md p-md radius-15" v-if="configInfo.reward_signin_open == 1">
				<image :src="configInfo.reward_signin_icon ? configInfo.reward_signin_icon : '/static/images/qiandao-icon.png'" mode="widthFix" class="fuli-list__icon radius-15">
				<view class="fuli-list__info flex-between m-l-sm">
					<view class="flex flex-column">
						<view>
							<text class="text-sm">{{configInfo.reward_signin_title}}</text>
							<text class="number text-md m-l-sm" :style="{'color':configInfo.mainColor1}">+{{ configInfo.reward_signin_in_num}}</text>
							<text class="text-xs text-secondary">{{configInfo.reward_signin_type == 1 ? configInfo.money_company : configInfo.integral_company}}</text>
						</view>
						<text class="text-xs text-secondary" v-if="configInfo.reward_signin_desc">{{configInfo.reward_signin_desc}}</text>
					</view>
					<view>
						<u-button shape="circle" size="small" :color="configInfo.mainColor" :style="{'color':configInfo.btnColor}" :text="userInfo.is_sign ? $t('reward.task-over') : configInfo.reward_signin_btn" :disabled="userInfo.is_sign" @click="signUp" throttleTime="1000"></u-button>
					</view>
				</view>
			</view>
			
			<!-- 邀请好友 -->
			<view class="fuli-list_item flex-start m-md p-md radius-15" v-if="configInfo.reward_share_open == 1">
				<image :src="configInfo.reward_share_icon ? configInfo.reward_share_icon : '/static/images/yaoqing-icon.png'" mode="widthFix" class="fuli-list__icon radius-15">
				<view class="fuli-list__info flex-between m-l-sm">
					<view class="flex flex-column">
						<text class="text-sm">{{$t('reward.invite-title')}}</text>
						<text class="text-xs text-secondary">{{$t('reward.invite-desc')}}</text>
					</view>
					<view>
						<u-button shape="circle" size="small" :color="configInfo.mainColor" :style="{'color':configInfo.btnColor}" :text="$t('reward.invite-btn')"  @click="$util.go('invitation/invitation',{'login':true})" throttleTime="1000"></u-button>
					</view>
				</view>
			</view>
			
			<!-- 积分兑换 -->
			<view class="fuli-list_item flex-start m-md p-md radius-15">
				<image :src="configInfo.reward_exchange_icon ? configInfo.reward_exchange_icon : '/static/images/duihuan-icon.png'" mode="widthFix" class="fuli-list__icon radius-15">
				<view class="fuli-list__info flex-between m-l-sm">
					<view class="flex flex-column">
						<text class="text-sm">{{$t('reward.exchange-title')}}</text>
						<text class="text-xs text-secondary">{{ configInfo.integral_company }}{{$t('reward.exchange-desc')}}</text>
					</view>
					<view>
						<u-button shape="circle" size="small" :color="configInfo.mainColor" :style="{'color':configInfo.btnColor}" :text="$t('reward.exchange-btn')"  @click="$util.go('index',{'path':'/mall/pages/' ,'login':true})" throttleTime="1000"></u-button>
					</view>
				</view>
			</view>
			
			<!-- 游戏试玩 -->
			 <!-- v-if="configInfo.reward_yxsw_open == 1 && $util.getPlatform() == 'app'" -->
			<view class="fuli-list_item flex-start m-md p-md radius-15"  v-if="configInfo.reward_yxsw_open == 1 && $util.getPlatform() == 'app'">
				<image :src="configInfo.reward_yxsw_icon ? configInfo.reward_yxsw_icon : '/static/images/game-icon.png'" mode="widthFix" class="fuli-list__icon radius-15">
				<view class="fuli-list__info flex-between m-l-sm">
					<view class="flex flex-column">
						<text class="text-sm">{{configInfo.reward_yxsw_title}}</text>
						<text class="text-xs text-secondary">{{configInfo.reward_yxsw_desc}}</text>
					</view>
					<view>
						<u-button shape="circle" size="small" :color="configInfo.mainColor" :style="{'color':configInfo.btnColor}" :text="configInfo.reward_yxsw_btn"  @click="showTaoJinList()"></u-button>
					</view>
				</view>
			</view>
			
			<!-- 语音红包 -->
			<!-- v-if="configInfo.reward_yyhb_open == 1 && $util.getPlatform() == 'app'" -->
			<view class="fuli-list_item flex-start m-md p-md radius-15"  v-if="configInfo.reward_yyhb_open == 1 && $util.getPlatform() == 'app'">
				<image :src="configInfo.reward_yyhb_icon ? configInfo.reward_yyhb_icon : '/static/images/hongbao-icon.png'" mode="widthFix" class="fuli-list__icon radius-15">
				<view class="fuli-list__info flex-between m-l-sm">
					<view class="flex flex-column">
						<text class="text-sm">{{configInfo.reward_yyhb_title}}</text>
						<text class="text-xs text-secondary" :class="{'disabled':this.voiceDisabled}" v-if="configInfo.reward_yyhb_desc">{{configInfo.reward_yyhb_desc}}</text>
					</view>
					<view>
						<u-button shape="circle" size="small" :color="configInfo.mainColor" :style="{'color':configInfo.btnColor}" :text="configInfo.reward_yyhb_btn"  @click="loadVoiceAd"></u-button>
					</view>
				</view>
			</view>
			
			<!-- 悬赏任务 -->
			<view class="fuli-list_item flex-start m-md p-md radius-15" v-if="configInfo.reward_task_open == 1 && $util.getPlatform() == 'app'">
				<image  :src="configInfo.reward_task_icon ? configInfo.reward_task_icon : '/static/images/hongbao-icon.png'" mode="widthFix" class="fuli-list__icon radius-15">
				<view class="fuli-list__info flex-between m-l-sm">
					<view class="flex flex-column">
						<text class="text-sm">{{configInfo.reward_task_title}}</text>
						<text class="text-xs text-secondary" v-if="configInfo.reward_task_desc">{{configInfo.reward_task_desc}}</text>
					</view>
					<view>
						<u-button shape="circle" size="small" :color="configInfo.mainColor" :style="{'color':configInfo.btnColor}" :text="configInfo.reward_task_btn" @click="showXuanShangWa"></u-button>
					</view>
				</view>
			</view>
			
			<!-- 占位视图 -->
			<view class="edgeInsetBottom"></view>
		</view>
		
		<side-tools :scrollTop="scrollTop" :backShow="false"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	// #ifdef APP-PLUS
	const voicdeReadSdk = uni.requireNativePlugin('xlx-voice-read-module')
	const taojinModule = uni.requireNativePlugin('LingKu-TaoJinModule');
	const xuanshangwaModule = uni.requireNativePlugin('LingKu-XuanShangModule');
	// #endif
	export default {
		data() {
			return {
				system:[],
				voiceShow:true,
				voiceDisabled:false,
				shareItem:false,
				exchange:true,
				scrollTop:0
				// isLogin:false
			}
		},
		// uni.getStorageSync('rewardBanner') || 
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			banner: state => state.content.rewardBanner,
		}),
		async onLoad(){
			// this.bannerList = uni.getStorageSync(this.cacheKey);	

			this.system = uni.$u.sys();
			
			// 获取轮播图
			this.initReward();
			
			// #ifdef APP-PLUS
				// this.voiceShow = true;
				voicdeReadSdk.init({
					appId: this.configInfo.xlx_appid,//渠道appId，从配置后台获取
					appSecret: this.configInfo.xlx_secret, //密钥，从配置后台获取
					debug: false 
				});
			// #endif
		},
		onReady(){
			// if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		async onShow(){
			
		},
		// 下拉刷新
		async onPullDownRefresh(){
			this.getUserInfo()
			this.$util.showToast(this.$t('app.renovate.success'),function(){
				uni.stopPullDownRefresh();
			});
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			...mapActions(['getUserInfo', 'getRewardBanner']),
			
			// 初始化此页面
			async initReward(){
				this.getRewardBanner()
			},
			
			// 轮播图点击
			bannerClick(index){
				let openUrl = this.banner[index]['params']['url']
				let type = this.banner[index]['params']['type']
				if(openUrl){
					if(type == 'page'){
						uni.navigateTo({
							url: openUrl
						});
					}
					if(type == 'link'){
						this.$util.openUrl(openUrl)
					}
				}
				// let banners = this.bannerList;
				// if(banners[index]['params']['url']){
				// 	this.$util.go(banners[index]['params']['url'],{'type':banners[index]['params']['type']});
				// }
			},
			
			// 签到
			async signUp(){
				if(!this.userInfo['is_sign']){
					uni.showLoading({title:this.$t('reward.signin-loading')});
					let res = await this.$api.user.signUp()
					if(res.code == 200){
						this.$util.showToast(res.msg)
					}
					this.getUserInfo()
				}

			},

			// 游戏试玩
			playGame(){
				this.$util.go('play_game/play_game',{'type':'page','login':true});
			},
			
			// 91淘金
			showTaoJinList() {
				if(!this.userInfo){
					this.$util.showToast('请先登录')
					return false;
				}
				taojinModule.show({
					'userId':this.userInfo['uid'],
				});
			},
			
			// 悬赏蛙
			showXuanShangWa(){
				if(!this.userInfo){
					this.$util.showToast('请先登录')
					return false;
				}
				xuanshangwaModule.show({
					'userId':this.userInfo['uid'],
				})
			},
			
			// 加载语音红包
			loadVoiceAd(){
				if(!this.userInfo){
					this.$util.showToast('请先登录')
					return false;
				}
				let sysInfo = uni.$u.sys();
				let os = uni.$u.os()
				if(sysInfo.uniPlatform != 'app' || os != 'android'){
					uni.showToast({title:this.$t('reward.none-android-tips'),icon: "none"});
					return false;
				}
				let thos = this
				uni.showLoading({title:this.$t('app.loading')});
				voicdeReadSdk.loadVoiceAd({
				    resourceId: thos.configInfo.reward_yyhb_seatid, //必要，资源位id
				    userId: thos.userInfo['uid'], // 必选，用于服务端回调时通知接入方给哪个用户发放奖励，不走服务端回调非必要
				    mediaExtra: "", //可选，额外的透传参数，仅支持单个json对象格式，不可以嵌套json对象
				    nickname:  thos.userInfo['username'] //可选，用户昵称
				}, 
				result => {
				    // console.log("result = " + JSON.stringify(result));
					switch (result.eventType) {
						// 广告加载成功
						case "onAdLoadSuccess":
							this.$util.showToast('加载成功')
							// uni.hideLoading();
							// if(result.params.maxReadNum - result.params.surplusReadNum <= 0){
							// 	// 剩余次数为0
							// 	this.voiceDisabled = true;
							// }
							this.showVoiceAd();
							break;
						// 广告加载失败
						case "onAdLoadError":
						  var errorCode = result.params.errorCode;
                          var errorMsg = result.params.errorMsg;
                          //请务必给用户展示错误信息，方便用户反馈时排查问题
                          uni.showToast({
                              icon: 'none',
                              title: `${errorMsg}(${errorCode})`,
                              duration: 2000
                          });
                          break;
							// uni.showToast({title:errorMsg,icon: "none"});
							// this.voiceShow = false;
							// var errorCode = result.params.errorCode;
							// var errorMsg = result.params.errorMsg;
							// uni.showToast({title:'语音红包加载错误：'+errorMsg,icon:"none"});
							break;
					} 
					// uni.hideLoading();
				})
				uni.hideLoading();
			},
			async showVoiceAd(){
				voicdeReadSdk.showVoiceAd(result => {
				  console.log("result = " + JSON.stringify(result));
				  switch (result.eventType) {
				      case "onAdShow":
				          //语音展示完成
				          break;
				      case "onAdError":
				          var errorCode = result.params.errorCode;
				          //广告展示失败
				          break;
				      case "onAdClose":
				          //广告关闭
				          break;
				      /**
				       * 奖励验证回调，开发者需要在此回调中做奖励的发放
				       * 多个奖励则会回调多次
				       */
				      case "onRewardVerify":
				    //       //requestId 当前曝光的请求id
				    //       var requestId = result.params.requestId;
				    //       // tagId 奖励唯一标识
				    //       var tagId = result.params.tagId;
				    //       //rewardAmount 当次广告媒体收益（单位元）
				    //       var rewardAmount = result.params.rewardAmount;
						  this.getUserInfo()
				          break;
				  } 
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:$bgcolor-2;
	}
	.u-swiper{
		// margin: 10px 0;
		background-color: transparent!important;
	}
	.fuli-list{
		&_item{
			background-color: #fff;
		}
		&__icon{
			width: 80rpx;
			height: 80rpx;
		}
		&__info{
			flex:1
		}
	}
	.reward-card{
		overflow: hidden;
		// background-color: #fff;
		// padding-top: 15px;
		.m-banner{
			// margin: 10px;
			// border-radius: 10px;
			// overflow: hidden;
			// padding: 10px 30rpx;
			// border-radius: 10px;
			// overflow: hidden;
		}
		.flex-between{
			flex-wrap: nowrap;
		}
		.item{
			text-align: center;
			width: 100%;
			color: $incolor-2;
			font-size: $contentSize;
			padding: 15px;
		}
		.num{
			padding: 15px 0;
			color: var(--main-color-2);
			font-size: 35rpx;
			font-weight: bold;
		}
		.desc{
			text-align: center;
			font-size: $contentSize;
			padding-bottom: 10px;
			color: $incolor-3;
		}
		// .foot{
		// 	padding: 10px 0;
		// }
	}
	/deep/ .side-tools{
		// #ifdef APP-PLUS
		bottom: 120rpx!important;
		// #endif
		// #ifdef H5
		bottom: 130rpx;
		// #endif
	}
</style>
